<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width,user-scalable=no" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/classification.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_603026_2npj5yaujta10pb9.css" />
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_604125_a6viixbot7wuerk9.css" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

</head>

<body>
    <div class="findMobile">
        <!--头部-->
        <header>
            <div class="back">
                <p class="fanhui">Back</p>
            </div>
            <div class="slCity fr">
                <select name="city">
                    <option style="width: 90px;" value="广州">广州</option>
                    <option value="深圳">深圳</option>
                    <option value="武汉">武汉</option>
                </select>
            </div>
            <div class="search">
                分类
            </div>
        </header>
        <!--主体内容-->
        <section>
            <!-- 轮播 -->
            <div class="swiper-container kv">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.png" alt="">
                            </div>
                            <span>美食</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo-2.jpg" alt="">
                            </div>
                            <span>电影</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.jpg" alt="">
                            </div>
                            <span>运动</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/kv_03.jpg" alt="">
                            </div>
                            <span>唱歌</span>
                        </div>
                    </li>
                    <li class="swiper-slide">
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.png" alt="">
                            </div>
                            <span>美食</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo-2.jpg" alt="">
                            </div>
                            <span>电影</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.jpg" alt="">
                            </div>
                            <span>运动</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/kv_03.jpg" alt="">
                            </div>
                            <span>唱歌</span>
                        </div>

                    </li>
                    <li class="swiper-slide">
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.png" alt="">
                            </div>
                            <span>美食</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo-2.jpg" alt="">
                            </div>
                            <span>电影</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.jpg" alt="">
                            </div>
                            <span>运动</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/kv_03.jpg" alt="">
                            </div>
                            <span>唱歌</span>
                        </div>

                    </li>
                    <li class="swiper-slide">
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.png" alt="">
                            </div>
                            <span>美食</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo-2.jpg" alt="">
                            </div>
                            <span>电影</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/lunbo.jpg" alt="">
                            </div>
                            <span>运动</span>
                        </div>
                        <div class="imgFoot">
                            <div class="foot">
                                <img src="img/goodGoods/kv_03.jpg" alt="">
                            </div>
                            <span>唱歌</span>
                        </div>

                    </li>
                </ul>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

            </div>


            <!-- 美食 -->
            <div class="goodGoods">
                <div class="clearfix allTitle">
                    <h3 class="title fl">
                        <img src="img//goodGoods/meishi1.png" />
                        <span>美食类</span>
                    </h3>
                    <p class="more fr">
                        <span>更多</span>
                        <img src="img/更多-2.png" />

                    </p>
                </div>
                <ul class="goodsImg">
                    <li>
                        <a href="">
                            <img src="img/goodGoods/美食1_03.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/美食1_05.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/美食1_07.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/美食1_09.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 运动 -->
            <div class="movement">
                <div class="clearfix allTitle">
                    <h3 class="title fl">
                        <img src="img//goodGoods/运动2.png" />
                        <span>运动类</span>
                    </h3>
                    <p class="more fr">
                        <span>更多</span>
                        <img src="img/更多-2.png" />

                    </p>
                </div>
                <ul class="movementImg">
                    <li>
                        <a href="">
                            <img src="img/goodGoods/运动2-_03.jpg">

                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/运动2-_05.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/运动2-_07.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/运动-_09.jpg">
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 电影 -->
            <div class="movie">
                <div class="clearfix allTitle">
                    <h3 class="title fl">
                        <img src="img//goodGoods/电影-2.png" />
                        <span>运动类</span>
                    </h3>
                    <p class="more fr">
                        <span>更多</span>
                        <img src="img/更多-2.png" />

                    </p>
                </div>
                <ul class="movieImg">
                    <li>
                        <a href="">
                            <img src="img/goodGoods/电影_03.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/电影_05.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/电影_03.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img src="img/goodGoods/电影_05.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </section>

        <!--底部导航-->
        <footer>
            <ul class="nav">
                <li>

                    <a href="index.html">
                        <i class="iconfont icon-msnui-home"></i>
                    </a>
                    <a href="index.html">首页</a>
                </li>
                <li>

                    <a href="classification.html">
                        <i class="iconfont icon-fenlei"></i>
                    </a>
                    <a href="classification.html">分类</a>
                </li>
                <li>

                    <a href="faxian.html">
                        <i class="iconfont icon-faxian"></i>
                    </a>
                    <a href="faxianhtml">发现</a>

                </li>
                <li>
                    <a href="myId.html">
                        <i class="iconfont icon-wode"></i>
                    </a>
                    <a href="myId.html">我的</a>

                </li>
            </ul>
        </footer>
    </div>
    <script type="text/javascript">
        document.body.style.height = document.body.clientHeight + "px";
    </script>
    <!--轮播js-->
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            //				direction: 'vertical',
            //循环
            loop: true,
            // autoplay: true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

        })
        //鼠标滑过pagination控制swiper切换
        for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
            mySwiper.pagination.bullets[i].index = i + 1
            mySwiper.pagination.bullets[i].onmouseover = function () {
                mySwiper.slideTo(this.index);
            };
        }
    </script>
</body>

</html>